<template>
  <div class="dashboard-container">
    <!-- github角标 -->
    <github-corner class="github-corner" />
    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col :span="18" :xs="24">
          <div class="flex h-full items-center">
            <img
              class="w-20 h-20 mr-5 rounded-full"
              :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
            />
            <div>
              <p>{{ greetings }}</p>
              <p class="text-sm text-gray">
                今日天气晴朗，气温在15℃至25℃之间，东南风。
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="10" class="mt-3">
      <!-- 商品浏览量(次) - PV -->
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="never">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-[var(--el-text-color-secondary)]"
                >商品浏览量(次) - PV</span
              >
              <el-tag type="success">日</el-tag>
            </div>
          </template>

          <div class="flex items-center justify-between mt-5">
            <div class="text-lg text-right">
              {{ Math.round(dauCountOutput) }}
            </div>
            <svg-icon icon-class="product" size="2em" />
          </div>
        </el-card>
      </el-col>
      <!--浏览人数 - UV-->
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="never">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-[var(--el-text-color-secondary)]"
                >商城浏览人数 - UV</span
              >
              <el-tag type="success">日</el-tag>
            </div>
          </template>

          <div class="flex items-center justify-between mt-5">
            <div class="text-lg text-right">
              {{ Math.round(visitCountOutput) }}
            </div>
            <svg-icon icon-class="visit" size="2em" />
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="never">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-[var(--el-text-color-secondary)]"
                >商城浏览人数 - UV</span
              >
              <el-tag type="warning">月</el-tag>
            </div>
          </template>

          <div class="flex items-center justify-between mt-5">
            <div class="text-lg text-right">
              {{ Math.round(muvCountOutput) }}
            </div>
            <svg-icon icon-class="users" size="2em" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- Echarts 图表 -->
    <el-row :gutter="10" class="mt-3">
      <el-col :sm="24" :lg="16" class="mb-2">
        <ProductBarChart
          id="barChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
        <ProductPieChart
          id="pieChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import ProductPieChart from "@/views/system/product/components/ProductPieChart.vue";
import { useTransition, TransitionPresets } from "@vueuse/core";
import ProductBarChart from "@/views/system/product/components/ProductBarChart.vue";
import { getProductStats } from "@/api/product/stats";
import { useUserStore } from "@/store";
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
const duration = 1100;
const dauCount = ref(0);
const mUV = ref(0);
const visitCount = ref(0);
const dauCountOutput = useTransition(dauCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
const visitCountOutput = useTransition(visitCount, {
  duration: duration, // 动画持续时间
  transition: TransitionPresets.easeOutExpo, // 动画效果
});
const muvCountOutput = useTransition(mUV, {
  duration: duration, // 动画持续时间
  transition: TransitionPresets.easeOutExpo, // 动画效果
});
onMounted(async () => {
  const res = await getProductStats();
  console.log(res.data);
  if (res.data !== null) {
    //商品浏览量(次) - PV
    dauCount.value = res.data.pv;
    // 浏览人数-UV
    visitCount.value = res.data.uv; // 访客数
    mUV.value = res.data.muv;
  }
});

const userStore = useUserStore();
const date: Date = new Date();

const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + userStore.user.nickname + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + userStore.user.nickname + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + userStore.user.nickname + "！";
  } else if (hours >= 0 && hours < 6) {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
